<template>
	<view class="products" :data-theme="theme">
		<!-- <view class="bg_color" style="padding: 24rpx 24rpx;">
			<u-search v-model="keyword" @custom="searchProduct" @search="searchProduct" placeholder="请输入退租申请单号"
				actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
		</view> -->
		<!-- 物资状态 -->
		<!-- <tab-bar style="background-color: #FFF;" :tabList="tabList" :tabIndex.sync="currentIndex"></tab-bar> -->
		<!-- 商品审核，筛选 -->
		<!-- <view style="background-color: #fff;">
			<view style="display: flex; justify-content: center;height: 40px;line-height: 40px;text-align: center;">
				<picker model="selector" @change="operateConfirm" range-key="name" :value="timeTypesIndex"
					:range="operateData" @cancel="cancelPicker"
					style="display: flex;justify-content: center;flex: 1;">
					<view style="flex: 1;justify-content: center;display: flex;"
						:style="{color:timeTypeShow?bgColor:null}" @click="timeTypeShow = true">
						<view style="font-size: 14px;margin-right: 6rpx;">{{operatyCity?operatyCity:'管理城市'}}</view>
						<u-icon :name="timeTypeShow?'arrow-up-fill':'arrow-down-fill'" size="10"
							:color="timeTypeShow?bgColor:''"></u-icon>
					</view>
				</picker>
				<picker model="selector" @change="bindPickerChange" range-key="depotName" :value="depotDataIndex"
					:range="depotList" @cancel="cancelPicker" style="display: flex;justify-content: center;flex: 1;">
					<view style="display: flex;justify-content: center;flex: 1;"
						:style="{color:depotTypeShow?bgColor:null}" @click="depotTypeShow = true">
						<view style="font-size: 14px;margin-right: 6rpx;">{{depotName?depotName:'仓库名称'}}</view>
						<u-icon :name="depotTypeShow?'arrow-up-fill':'arrow-down-fill'" size="12"
							:color="depotTypeShow?bgColor:''"></u-icon>
					</view>
				</picker>
			</view>
		</view> -->
		<swiper class="tab-view" :duration="300" :current.sync="currentIndex">
			<swiper-item class="swiper-item" style="display: flex;">
				<scroll-view scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
					style="height: 100%; overflow: hidden;">
					<apply-service-page class="swiper-page" :bgColor="bgColor" ref="pages"
						:applyData="applyData"></apply-service-page>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
			<button @click="returnMaterials()" style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
				class="bg_color" :color="bgColor">提交申请</button>
		</view>

		<!-- -----组件----- -->
		<u-modal style="position: absolute;" :content="showInfoModalInfos[showInfoModalIndex]"
			:show="showInfoModalVision" showCancelButton buttonReverse @confirm="showInfoModalConfirm"
			@cancel="() => showInfoModalVision = false"></u-modal>
	</view>
</template>

<script>
	import {
		returnMaterialsApi
	} from '@/api/materials.js';
	import applyServicePage from "./components/apply-service-page.vue";
	import {
		setThemeColor
	} from '@/utils/setTheme';
	let app = getApp();
	export default {
		components: {
			// 	tabBar,
			// 	appliceTermine,
			applyServicePage
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				keyword: "", //搜索商品
				tabHeaderLoading: true,
				tabList: [],
				currentIndex: 0,
				applyForm: {
					limit: 10,
					page: 1,
					auditStatus: 2, //2已通过，审核状态
					rentStatus: 1, //出借状态：1租借中，2归还中，3已归还，0未使用
				},
				applyData: [],

				showInfoModalVision: false, //多功能确认事件
				showInfoModalIndex: 0,
				showInfoModalInfos: [
					"该商品正在出售中，是否确认进行编辑？",
					"确定将该商品加入回收站吗？",
					"确认恢复商品吗？"
				],
				//-- 上下架选择
				addCheckData: {},
				addCheckboxList: [],
				showUpDatePopup: false,
				//---

				timeTypeShow: false, //上下架时间选择
				timeTypeColumns: [{
						label: '正序',
						id: 0
					},
					{
						label: '倒序',
						id: 1
					}
				],
				timeTypesIndex: 0,
				//----------仓库----------
				depotDataIndex: 0,
				depotList: [],
				depotDataIndex: 0,
				depotTypeShow: false, //选择仓库下拉框
				depotForm: {
					limit: 10,
					page: 1,
				}, // 查询仓库名称
				depotData: [], //仓库数据
				depotName: '',
				// ------------查询经营城市--------
				operateCityForm: {
					queryType: 0, //0-查询号主自己，1-查询所有,使用1时必须配合父级Id“0“
				},
				operateData: [],
				useId: '',
				operatyCity: '', //城市名称
			};
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			// this.getDepotList();
			// this.getOperateCity();
			let that = this;
			// APP-NVUE平台暂不支持以this.getOpenerEventChannel()方式获取eventChannel，请换用this.$scope.eventChannel来获取
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('materialsInfo', function(param) {
				// that.productAttrParam = param;
				console.log(param);
				that.applyData = param.data;

			});
			// this.getApplyedList();
		},
		methods: {
			/** 获取申请的物资列表 */
			// getApplyedList() {
			// 	getApplyMaterialsAPi(this.applyForm).then((res) => {
			// 		console.log('res:', res);
			// 		this.applyData = res.data.records;
			// 	})
			// },
			returnMaterials(item) {
				// this.$refs.pages.newDataValue;
				console.log(this.$refs.pages.newDataValue);
				let dataValue = this.$refs.pages.newDataValue;
				let rentDataValue = [];
				rentDataValue = dataValue.map((ele) => {
					return {
						rentOrderId:ele.id,
						materialApplyItems:ele.materialItemIds.map((res) => {
							return {
								count:res.counts,
								itemId:res.itemId
							}
						})
					}
				});
				console.log('rentDataValue:',rentDataValue)
				
				// let returnValue = {
				// 	rentOrderId: item.id,
				// 	// rentUserId:item.rentUserId
				// 	materialApplyItems: JSON.parse(item.materialItemIds)
				// }
				// console.log('returnValue:', returnValue, item)
				// returnMaterialsApi(returnValue).then((res) => {
				// 	console.log(res);
				// })
			},
			// 获取仓库 id
			getDepotList() {
				queryDepotInformationApi(this.depotForm).then((res) => {
					let depot = res.data.list
					let depotData = depot.map(obj => {
						const {
							createMemberName,
							depotAddress,
							depotTelephone,
							updatedMemberName,
							zoneId,
							...rest
						} = obj; //删除部分属性
						return rest
					}); //要删除的数据的数组
					let addDepotData = [{
						depotId: '',
						depotName: '全部'
					}];
					depotData.unshift(...addDepotData);
					this.depotData.push(depotData);
					this.depotList = depotData;
				})
			},
			bindPickerChange(e) {
				let i = e.detail.value;
				let list = this.depotList[i].depotId;
				this.depotName = this.depotList[i].depotName;
				this.depotTypeShow = false;
				console.log('e:', e.detail.value)
				// this.$refs.tab[this.tabCurrentIndex].invoiceTypeConfirm(list);
			},
			/*
			 *获取经营城市信息*/
			getOperateCity() {
				queryBusinessOperateCityApi(this.operateCityForm).then((res) => {
					let newDataList = [];
					// 使用 reduce 方法将所有的 sonVOList 组合成一个新数组
					let allSonVOLists = res.data.reduce((acc, current) => {
						return acc.concat(current.sonVOList);
					}, []);

					let addDepotData = [{
						useId: '',
						name: '全部'
					}];
					allSonVOLists.unshift(...addDepotData);
					// this.depotData.push(depotData);

					this.operateData = allSonVOLists;
				})
			},
			operateConfirm(e) {
				let i = e.detail.value;
				let list = this.operateData[i].uesId;
				this.operatyCity = this.operateData[i].name;
				this.timeTypeShow = false;
				console.log('e:', e.detail.value)
				// this.$refs.tab[this.tabCurrentIndex].invoiceTypeConfirm(list);
			},

			cancelPicker() {
				this.depotTypeShow = false;
				this.timeTypeShow = false;
			},
			/* 滚动 */
			scrolltolowerFn() {
				this.$refs.pages.scrolltolowerFn()
			},

			goPage(url, success) {
				uni.navigateTo({
					url,
					success: success
				});
			},
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	::v-deep .u-popup {
		flex: 0 !important;
	}

	.page {
		flex: 1;
	}

	/* #endif */
	.products {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		// background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 32rpx;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 0;
				font-size: 36rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}

		.list {
			height: 750rpx;
			margin: 0 30rpx;
			overflow-x: hidden;
			overflow-y: auto;

			.item {
				margin-bottom: 52rpx;

				.pictrue {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					margin-right: 30rpx;

					/deep/image,
					.easy-loadimage,
					image,
					uni-image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.text {
					width: 618rpx;
					color: #999999;
					font-size: 28rpx;

					.name {
						color: #333333;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
				}
			}
		}

	}

	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}
</style>